<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-01-01 13:01:36
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-05-18 10:15:59
 -->
<template>
  <div class="header">
    <div class="header-box">
      <el-row>
        <el-col :span="12">
          <hamburger v-if="menuIsNull === false" class="hamburger-container"></hamburger>
          <div class="sys-logo" @click="goHomePage()">
            <div class="el-avatar">
              <img alt="System logo" src="@/assets/asm.png" />
            </div>
            <div class="product-name" v-text="productName"></div>
          </div>
        </el-col>
        <el-col :span="12" class="user">
          <el-popover placement="bottom" popper-class="asm-core" trigger="click">
            <el-card shadow="never" style="width:300px;">
              <div class="clearfix" slot="header">
                <el-row>
                  <el-col :span="6">
                    <div class="header-user-avatar">
                      <i v-if="!userInfo.userPortrait" class="las la-user-secret"></i>
                      <el-avatar v-else :src="userInfo.userPortrait"></el-avatar>
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <div class="header-user-details">
                      <div class="ellipsis">
                        <span v-text="userInfo.personName"></span>
                      </div>
                      <div class="org-name ellipsis">
                        <span v-text="orgName"></span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div style="position:relative">
                <div style="position:absolute;top:-20px;left:0px;right:0px;text-align:center">
                  <el-button @click="updatePWD" type="text">修改密码</el-button>
                  <el-button @click="loginOut" style="margin-left:60px;" type="text">安全退出</el-button>
                </div>
              </div>
            </el-card>
            <el-button icon="las la-user-secret la-lg" slot="reference">
              <span v-text="userInfo.personName"></span>
            </el-button>
          </el-popover>
        </el-col>
      </el-row>
    </div>
    <!--修改密码-->
    <update-pwd :visible.sync="showUpPwd"></update-pwd>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  props: {
    menuIsNull: {
      type: Boolean,
      required: true
    }
  },
  components: {
    hamburger: require('@/components/home/Hamburger').default,
    'update-pwd': require('@/components/home/UpdatePWD').default
  },
  computed: {
    ...mapState('login', ['productName', 'userInfo', 'showMenu']),
    orgName: {
      get() {
        let name = this.userInfo.orgName
        if (!name) {
          name = this.productName
        }
        return name
      }
    }
  },
  data() {
    return {
      showUpPwd: false
    }
  },
  methods: {
    ...mapActions('login', ['submitLoginOut']),
    updatePWD() {
      this.showUpPwd = true
    },
    goHomePage() {
      this.$router.push('/dashboard')
    },
    // 执行安全退出操作
    loginOut() {
      this.$alert('您确认要退出系统吗?', '安全退出', {
        confirmButtonText: '确定',
        callback: action => {
          if (action == 'confirm') {
            this.submitLoginOut()
              .then(() => {
                this.$router.push({ path: '/login' })
              })
              .catch(err => {
                const errInfo = err.message
                if (errInfo !== undefined) {
                  console.log('loginOut:' + errInfo)
                }
              })
          }
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.header
  position relative
  .header-box
    height $headerHeight
    position absolute
    left -20px
    right -20px
    line-height $headerHeight
    background linear-gradient(145deg, $primary 11%, $dark-primary 75%)
    background linear-gradient(145deg, var(--a-color-primary) 11%, var(--a-color-dark-primary) 75%)
  .hamburger-container
    line-height $headerHeight
    height 100%
    float left
    cursor pointer
    transition background 0.3s
    -webkit-tap-highlight-color transparent
    color #fff
    &:hover
      background rgba(0, 0, 0, 0.088)
  .sys-logo
    margin-left 10px
    display inline-block
    box-sizing border-box
    cursor pointer
    .el-avatar
      background #fff
      border-radius 50%
      position absolute
      top 10px
    .product-name
      padding-top 2px
      display inline-block
      box-sizing border-box
      margin-left 46px
      font-size 1.2rem
      color #ffffff
  .user
    text-align right
    .el-button
      height $headerHeight
      border-radius 0px
      background none
      border none
      color #fff
    &:hover .el-button
      background rgba(0, 0, 0, 0.088)
.header-user-avatar
  background $primary
  background var(--a-color-primary)
  width 48px
  height 48px
  border-radius 50%
  text-align center
  i
    color #fff
    line-height 48px
    font-size 26px
  .el-avatar
    width 48px
    height 48px
.header-user-details
  border-left 1px solid #eff2f6
  padding-left 10px
  .org-name
    margin-top 10px
</style>
